<template>
<!-- 倒计时 -->
    <div>
        <span id="deltaTime" ></span>
        <button type="button" class="btn"  @click="showModal">打开Modal</button>
        <modal v-show="isModalVisible" @close="closeModal" />
    </div>
</template>
<style scoped>
#deltaTime{margin-left:20%;margin-right: 1%;}
</style>
<script>
import modal from './dialog.vue'
export default {
    data(){
        return{
            isLoading: true,
            isModalVisible: false
        }
    },
    components:{
        modal
    },
   mounted() {
        const me = this
        // 初始化页面数据,倒计时
        me.loadPageData()
    },
    methods:{
        loadPageData:function(){
            var deltaTime = document.getElementById("deltaTime");
			var goal = new Date("2019-9-6 22:00:00"); //暂时没有实现后台功能,先用本地时间
			var now = new Date(); //调用js的Date类来获取时间
			var deltaTotalTime = (goal.getTime() - now.getTime()) / 1000; //getTime以毫秒为单位,所以需要/1000才能获得秒
			var deltaHours = Math.floor(deltaTotalTime / 3600); //小时
			var deltaMinutes = Math.floor((deltaTotalTime - 3600 * deltaHours) / 60); //分钟
			var deltaSeconds = Math.floor(deltaTotalTime - deltaHours * 3600 - deltaMinutes * 60); //秒
			deltaTime.textContent = "倒计时" + deltaHours + ":" + deltaMinutes + ":" + deltaSeconds;
			setInterval(function() { //没过一秒重新设置一次
				now = new Date();
				deltaTotalTime = (goal.getTime() - now.getTime()) / 1000;
				deltaHours = Math.floor(deltaTotalTime / 3600);
				deltaMinutes = Math.floor((deltaTotalTime - 3600 * deltaHours) / 60);
				deltaSeconds = Math.floor(deltaTotalTime - deltaHours * 3600 - deltaMinutes * 60);
				deltaTime.textContent = "倒计时" + deltaHours + ":" + deltaMinutes + ":" + deltaSeconds;
			}, 1000)
        },
        showModal: function () {
            this.isModalVisible = true
        },
        closeModal: function () {
            this.isModalVisible = false
        }
    }
}
</script>
